<!DOCTYPE html>
<html>
<head>
	<title>Attach inputs dynamically</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<style>
		#calendar,
		#calendar2,
		#calendar3 {
			border: 1px solid #dfdfdf;
			font-family: Roboto, Arial, Helvetica;
			font-size: 14px;
			color: #404040;
		}
		#att_state,
		#att_state2,
		#att_state3 {
			font-family: Roboto, Arial, Helvetica;
			font-size: 14px;
			color: #404040;
		}
	</style>
	<script>
		var myCalendar;
		function doOnLoad() {
			myCalendar = new dhtmlXCalendarObject();
			myCalendar.setPosition("right");
			var k = {"cal_1":"att_state","cal_2":"att_state2","cal_3":"att_state3"};
			for (var a in k) doAttach(a,k[a]);
		}
		var attached = {};
		function doAttach(id, sp) {
			if (attached[id] != null) return;
			attached[id] = myCalendar.attachObj(id);
			document.getElementById(sp).innerHTML = "attached";
			document.getElementById(sp).style.color = "green";
		}
		function doDetach(id, sp) {
			if (attached[id] == null) return;
			myCalendar.detachObj(attached[id]);
			attached[id] = null;
			document.getElementById(sp).innerHTML = "not attached";
			document.getElementById(sp).style.color = "red";
		}
	</script>
</head>
<body onload="doOnLoad();">
	<div style="position:relative;height:350px;">
		<table>
			<tr>
				<td>
					<input type="button" value="attach" onclick="doAttach('cal_1','att_state');">
					<input type="button" value="detach" onclick="doDetach('cal_1','att_state');">
				</td>
				<td width="100"><span id="att_state"></span></td>
				<td><input type="text" id="cal_1"></td>
			</tr>
			<tr>
				<td>
					<input type="button" value="attach" onclick="doAttach('cal_2','att_state2');">
					<input type="button" value="detach" onclick="doDetach('cal_2','att_state2');">
				</td>
				<td><span id="att_state2"></span></td>
				<td><input type="text" id="cal_2"></td>
			</tr>
			<tr>
				<td>
					<input type="button" value="attach" onclick="doAttach('cal_3','att_state3');">
					<input type="button" value="detach" onclick="doDetach('cal_3','att_state3');">
				</td>
				<td><span id="att_state3"></span></td>
				<td><input type="text" id="cal_3"></td>
			</tr>
		</table>
	</div>
</body>
</html>